html, body{
    width:100%;
    height:100%;
}

body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    overflow-y:auto;
    background:#eee;
}

header, footer{
    width: 100%;
    height: 1.5rem;
    font-size:0.277777rem;
    border-top:1px solid #f0f0f0;
    z-index:10;
    position:fixed;
    display: flex;
}
header{
    background:url(/static/main/img/logo.png) no-repeat;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    margin-bottom:50px;

}
footer{
    background:#fff;
    bottom:0;
    left:0;
}

footer a{
    display:block;
    width:25%!important;
    text-align:center;
    overflow:hidden!important;
}

footer dl dt{
    height:0.777777rem;
    padding-top:0.22222rem;
    position:relative;
}


footer dl dt span{
    display:inline-block;
    width:0.513889rem;
    height:0.513889rem;
}

footer dl dd{
    width: 100%;
    height: 0.708333rem;
}


footer .home span{
    background: url(/static/main/img/home.png) no-repeat;
    background-size:0.513889rem;
}
footer .market span{
    background:url(/static/main/img/market.png) no-repeat;
    background-size:0.513889rem;
}
footer .cart span{
    background:url(/static/main/img/cart.png) no-repeat;
    background-size:0.513889rem;
}
footer .mine span{
    background:url(/static/main/img/mine.png) no-repeat;
    background-size:0.513889rem;
}

a{
    text-decoration:none
}
a:link{
    text-decoration:none
}
a:visited{
    text-decoration:none
}
a:hover{
    text-decoration:none
}
a:active{
    text-decoration:none
}




/* basic menu styles */
.nav-menu {
	display: block;
	/* background: #74adaa;*/
	width:950px;
	margin: 50px auto 150px;
}
.nav-menu > li {
	display: inline;
	float:left;
	border-right:1px solid #94c0be;
}
.nav-menu > li:last-child {
	border-right: none;
}
.nav-menu li a {
	color: #fff;
	display: block;
	text-decoration: none;
	/*调用本地字体*/
	font-family:sansationregular;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-transform: capitalize;
	overflow: visible;
	line-height: 20px;
	font-size: 20px;
	padding: 15px 30px 15px 31px;
}
.three-d {
	/* 任务三、设置3D舞台布景 */
	-webkit-perspective: 200px;
	-moz-perspective: 200px;
	-ms-perspective: 200px;
	-o-perspective: 200px;
	perspective: 200px;
          /*任务四、设置3D舞台布景过渡效果*/
	-webkit-transition: all .07s linear;
 	-moz-transition: all .07s linear;
 	-ms-transition: all .07s linear;
 	-o-transition: all .07s linear;
 	transition:all .7s linear;
	position: relative;
}
.three-d:not(.active):hover {
	cursor: pointer;
}
/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
.three-d:not(.active):hover .three-d-box,  .three-d:not(.active):focus .three-d-box {
	-wekbit-transform: translateZ(-25px) rotateX(90deg);
 	-moz-transform: translateZ(-25px) rotateX(90deg);
 	-o-transform: translateZ(-25px) rotateX(90deg);
 	-ms-transform: translateZ(-25px) rotateX(90deg);
 	transform: translateZ(-25px) rotateX(90deg);
/*    -webkit-transform:rotateX(90deg) translatez(-25px);*/
       /*   -webkit-transform:rotatex(90deg);*/
}
.three-d-box {
          /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
	-webkit-transition: all .3s ease-out;
 	-moz-transition: all .3s ease-out;
 	-ms-transition: all .3s ease-out;
 	-o-transition: all .3s ease-out;
 	transition: all .3s ease-out;
	-webkit-transform: translatez(-25px);
	-moz-transform: translatez(-25px);
	-ms-transform: translatez(-25px);
	-o-transform: translatez(-25px);
	transform: translatez(-25px);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-pointer-events: none;
	-moz-pointer-events: none;
	-ms-pointer-events: none;
	-o-pointer-events: none;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
/*任务七、给导航设置3D前，与3D后变形效果*/
.front {
	-webkit-transform: rotatex(0deg) translatez(25px);
	-moz-transform: rotatex(0deg) translatez(25px);
	-ms-transform: rotatex(0deg) translatez(25px);
	-o-transform: rotatex(0deg) translatez(25px);
	transform: rotatex(0deg) translatez(25px);

}
.back {
	-webkit-transform: rotatex(-90deg) translatez(25px);
	-moz-transform: rotatex(-90deg) translatez(25px);
	-ms-transform: rotatex(-90deg) translatez(25px);
	-o-transform: rotatex(-90deg) translatez(25px);
	transform: rotatex(-90deg) translatez(25px);
	color: #FFE7C4;
}
.front, .back {
	/*          border:1px solid red;*/
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #74adaa;
	padding: 15px 30px 15px 31px;
	color: white;
	-webkit-pointer-events: none;
	-moz-pointer-events: none;
	-ms-pointer-events: none;
	-o-pointer-events: none;
	pointer-events: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
.nav-menu li .active .front,  .nav-menu li .active .back,  .nav-menu li a:hover .front,  .nav-menu li a:hover .back {
	background-color: #51938f;
	-webkit-background-size: 5px 5px;
	background-size: 5px 5px;
	background-position: 0 0, 30px 30px;
	background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
	background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
	background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
	background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
	background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
.nav-menu ul {
	position: absolute;
	text-align: left;
	line-height: 40px;
	font-size: 14px;
	width: 200px;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-webkit-transform-origin: 0px 0px;
	-moz-transform-origin: 0px 0px;
	-ms-transform-origin: 0px 0px;
	-o-transform-origin: 0px 0px;
	transform-origin: 0px 0px;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	-ms-transform: rotateX(-90deg);
	-o-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
.nav-menu > li:hover ul {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
